<template>
	<view class = "content">
		<scroll-view  scroll-y class="list" :style="{'height':swiperHeight+'px'}"
		refresher-enabled
		:refresher-threshold="100"
		:refresher-triggered="triggered"
		@refresherrefresh="onRefresh"
		@scrolltolower="scrolltolower"
		:lower-threshold="100"	>
			<view>
				<block v-for="(item, index) in GraphicList" :key= "index">
					<graphic-item :graphic="item" class="graphic-item" 
					@clickAttention="clickAttention(item.uid)" 
					@clickInput="clickInput"
					@clickVideo="clickVideo"
					:dataIndex="index"
					@clickComment="clickComment"
					@contentClick="contentClick"
					@forwardFun="forwardFun(item.id)"
					@likeFun="likeFun"></graphic-item>
				</block>
			</view>
			<view class="graphic-list-content"  v-if="GraphicList.length == 0 && isReady">
				<view class="content-none flex-ali-center flex-juscon-center" :style="{'height': noneWrap + 'px'}">
					<view class="none-hit">
						<image class="content-none-img" src="../../static/imgs/none.png" mode="widthFix"/>
						<view class="content-none-text">好像被外星人掳走了~</view>
					</view>
				</view>
			</view>
			<view class="bottom-loading" v-if="GraphicList.length > 0 ">{{bottomLoading}}</view>
		</scroll-view>
		<!-- 弹出提示框 -->
		<uni-popup ref="popup" type="center" animation @change="popuChange">
			<view class="popup-content">
				<view class="popup-title">转发</view>
				<view class="popu-prompt">确定转发此条趣事？</view>
				<view class="popu-butons">
					<view class="cancel-btn" @click="cancelPopu">取消</view>
					<view class="confirm-btn" @click="confirmPopu">确定</view>
				</view>
			</view>
		</uni-popup>
		<mpopup ref="mpopup" :isdistance="true"></mpopup>
	</view>
</template>

<script>
	import GraphicItem from '@/components/funScrollView/Graphic-item.vue';
	import {TheFun} from '@/model/theFun.js';
	import {User} from '@/model/user.js';
	import mpopup from '@/components/xuan-popup/xuan-popup.vue'
	export default {
		data() {
			return {
				GraphicList:[],
				noneWrap:500,
				swiperHeight:500,
				triggered: false,
				bottomLoading:"上拉加载更多！",
				isReady:false,
				likeClick:false,
				funId:0,
				page:1
			};
		},
		components:{
			GraphicItem,
			mpopup
		},
		async onLoad() {
			let res = uni.getSystemInfoSync();
			this.noneWrap = res.windowHeight - uni.upx2px(100)
			this.swiperHeight = res.windowHeight- uni.upx2px(20)
			uni.showLoading({
				title:"加载中..."
			})
			let funRes = await TheFun.getFriendFun()
			this.page = 1;
			if(funRes.code != 200){
				this.$refs.mpopup.open({
					type:'err',
					content:funRes.message,
					timeout:2000,
					isClick:false
				});
				return
			}
			this.isReady = true
			this.GraphicList = funRes.data.data
			if(this.page * 15 < funRes.data.count){
				this.isNoData = false
			}else{
				this.isNoData = true
				this.bottomLoading = "我也是有底线的...."
			}
		},
		onShow() {
			uni.$on("refreshDynamic", async e=>{
				let dataIndex = this.GraphicList.findIndex(item=>item.id == e.dataId)
				console.log(dataIndex)
				let res = await TheFun.getFunDetail({funId:e.dataId})
				this.GraphicList[dataIndex].isClick = res.data.isClick
				this.GraphicList[dataIndex].likeNum = res.data.likeNum
				this.GraphicList[dataIndex].commentNum = res.data.commentNum
				this.GraphicList[dataIndex].forwardNum = res.data.forwardNum
				console.log(this.GraphicList)
			})
		},
		methods:{
			async onRefresh() {
				if (this._freshing) return;  
				this._freshing = true;  
				if (!this.triggered)//界面下拉触发，triggered可能不是true，要设为true  
					this.triggered = true;
				this.bottomLoading = "上拉加载更多"
				this.isNoData = false
				this.page = 1;
				let funRes = await TheFun.getFriendFun()
				if(funRes.code != 200){
					this.hideRefresh()
					this.$refs.mpopup.open({
						type:'err',
						content:funRes.message,
						timeout:2000,
						isClick:false
					});
					return
				}
				this.GraphicList = funRes.data.data
				if(this.page * 15 < funRes.data.count){
					this.isNoData = false
				}else{
					this.isNoData = true
					this.bottomLoading = "我也是有底线的...."
				}
				this.hideRefresh()
			},
			clickVideo(e){
				uni.$on("getVideoInfo",c=>{
					c.fun(e)
				})
				uni.navigateTo({
					url:'../../pages/detailVideo/detailVideo',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', { graphic: e })
					}
				})
			},
			hideRefresh(){
				setTimeout(() => {
					this.triggered = false;//触发onRestore，并关闭刷新图标  
					this._freshing = false;
				}, 500)  
			},
			async scrolltolower(){
				// console.log(this.isNoData || this.isLoading)
				if (this.isLoading || this.isNoData) return;
				this.isLoading = true;  
				this.bottomLoading = "加载中..."
				this.page += 1
				let funRes = await TheFun.getFriendFun({page:this.page})
				if(funRes.code != 200){
					this.hideRefresh()
					this.$refs.mpopup.open({
						type:'err',
						content:funRes.message,
						timeout:2000,
						isClick:false
					});
					return
				}
				this.GraphicList.push(...funRes.data.data)
				if(this.page * 15 < funRes.data.count){
					this.isNoData = false
				}else{
					this.isNoData = true
					this.bottomLoading = "我也是有底线的...."
				}
				// this.$emit("scrolltolower",this.tagIndex)
				console.log("触底")
				this.doenTolower()
			},
			doenTolower(){
				this.isLoading = false;
			},
			tolowerNoData(){
				this.isLoading = false;
				this.isNoData = true
				this.bottomLoading = "我也是有底线的...."
			},
			async forwardFun(id){
				this.$refs.popup.open()
				this.funId = id
			},
			clickInput(e){
				// this.$emit("clickInput",{...e})
				uni.navigateTo({
					url:'../../pages/funDetaile/funDetaile',
					success: res => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', { data: e.id })
					}
				})
			},
			contentClick(e){
				// this.$emit('contentClick', this.graphic)
				uni.navigateTo({
					url:'../../pages/funDetaile/funDetaile',
					success: res => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', { data: e.id })
					}
				})
			},
			clickVideo(e){
				// this.$emit('clickVideo', this.graphic)
				uni.$on("getVideoInfo",c=>{
					c.fun(e)
				})
				uni.navigateTo({
					url:'../../pages/detailVideo/detailVideo',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', { graphic: e })
					}
				})
			},
			clickAvatr(e){
				// this.$emit("clickAvatr",this.graphic)
			},
			async clickAttention(uid){
				// this.$emit('clickAttention',this.graphic.uid)
				uni.showLoading({
					mask:true,
					title:"加载中..."
				})
				let res = await User.attentionUser({uid:uid})
				uni.hideLoading()
				if(res.code != 200 ){
					this.$refs.mpopup.open({
						type:'err',
						content:res.message,
						timeout:2000,
						isClick:false
					});
					return 
				}
				this.$refs.mpopup.open({
					type:'success',
					content:"关注成功",
					timeout:2000,
					isClick:false
				});
				this.GraphicList.forEach(item=>{
					if(item.uid == uid){
						item.isAttention = true
					}
				})
				this.$store.contentViewList.forEach(item=>{
					if(item.funSharePageResult){
						item.funSharePageResult.data.forEach(graphic=>{
							if(graphic.uid == uid){
								graphic.isAttention = true
							}
						})
					}
				})
			},
			clickComment(e){
				uni.navigateTo({
					url:'../../pages/funDetaile/funDetaile',
					success: res => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', { data: e.id})
					}
				})
			},
			async likeFun(e){
				// this.$emit("likeFun",{
				// 	data:this.graphic,
				// 	index:this.pageIndex,
				// 	dataIndex:this.dataIndex
				// })
				if(this.likeClick)
					return
				this.likeClick = true
				if(e.data.isClick){
					let res = await TheFun.likeFun({
						id:e.data.id,
						clickType:2,
						funOrTopic:1
					})
					this.likeClick = false
					if(res.code == 200){
						this.GraphicList[e.dataIndex].isClick = false
						this.GraphicList[e.dataIndex].likeNum -= 1
						return
					}
					this.$refs.mpopup.open({
						type:'err',
						content:res.message,
						timeout:2000,
						isClick:false
					});
					return
				}
				let res = await TheFun.likeFun({
					id:e.data.id,
					clickType:1,
					funOrTopic:1
				})
				this.likeClick = false
				if(res.code == 200){
					this.GraphicList[e.dataIndex].isClick = true
					this.GraphicList[e.dataIndex].likeNum += 1
					return
				}
				this.$refs.mpopup.open({
					type:'err',
					content:res.message,
					timeout:2000,
					isClick:false
				});
			},
			toggle() {
				this.$refs.popup.open()
			},
			hiddenpopup(e){
				this.$refs.popup.showPopup = false
			},
			cancelPopu(){
				this.hiddenpopup()
			},
			popuChange(e){
				console.log(e)
			},
			async confirmPopu(){
				this.hiddenpopup()
				uni.showLoading({
					mask:true,
					title:"加载中..."
				})
				let res = await TheFun.forwardFun({funId:this.funId})
				
				// console.log(res)
				if(res.code != 200){
					this.$refs.mpopup.open({
						type:'err',
						content:res.message,
						timeout:2000,
						isClick:false
					});
					return 
				}
				this.$refs.mpopup.open({
					type:'success',
					content:转发成功,
					timeout:2000,
					isClick:false
				});
			},
		}
	}
</script>

<style>
	page{
		background-color: #F2F2F2;
	}
</style>
<style lang="scss" scoped>
	.popup-content{
		background-color: #FFF;
		width: 500rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		.popup-title{
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			color: $fun-theme-color;
			border-bottom: 1rpx #F2F2F2 solid;
		}
		.popu-prompt{
			font-size: 30rpx;
			color: #666666;
			padding: 20rpx 40rpx;
		}
		.popu-butons{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.confirm-btn{
				background-color: $fun-theme-color;
				flex: 1;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom-right-radius: 20rpx;
			}
			.cancel-btn{
				flex: 1;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom-left-radius: 20rpx;
			}
		}
	}
	.content{
		box-sizing: border-box;
		padding: 10rpx;
		.graphic-item{
			margin-bottom: 20rpx;
		}
	}
	.graphic-list-content{
		
		.content-none{
			width: 100vw;
			.none-hit{
				margin-top: -100rpx;
				.content-none-img{
					width: 400rpx;
				}
				.content-none-text{
					text-align: center;
					color: #999999;
					font-size: 14rpx;
				}
			}
		}
	}
	.bottom-loading{
		margin: 15rpx;
		font-size: 26rpx;
		text-align: center;
		color: #999;
	}
</style>
